<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>POI</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"/>
    <link rel="stylesheet" href="../layui-admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layui-admin/style/admin.css" media="all">
    <style>
        #search-result {
            border: 1px solid #C0C0C0;
            width: 300px;
            height: auto;
            display: none;
        }

        #all-map {
            width: auto;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">POI</div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <input id="keyword" class="layui-input" placeholder="请输入关键字搜索"/>
                <div id="search-result"></div>
            </div>
            <div class="layui-form-item">
                <input id="title" class="layui-input" placeholder="POI名称"/>
            </div>
            <div class="layui-form-item">
                <input id="address" class="layui-input" placeholder="POI地址"/>
            </div>
            <div class="layui-form-item">
                <input id="point" class="layui-input" placeholder="经纬度"/>
            </div>
            <div class="layui-form-item">
                <div id="all-map"></div>
            </div>
        </div>
    </div>
</div>
<script src="../layui-admin/layui/layui.js"></script>
<script src="https://api.map.baidu.com/api?v=3.0&ak=F4397f39c2f8356477d143612f1903da"></script>
<script>
    const allMapConfig = {location: '河北省石家庄市', zoom: 12};
    const allMap = new BMap.Map("all-map");
    const allMapGeo = new BMap.Geocoder();
    const allMapGeolocation = new BMap.Geolocation();
    const allMapAutocomplete = new BMap.Autocomplete({input: 'keyword', location: allMap});
    const allMapLocalSearch = new BMap.LocalSearch(allMap);
    const allMapCopyrightControl = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: new BMap.Size(5, 5)});
    layui.config({
        base: '../layui-admin/'
    }).extend({
        index: 'lib/index'
    }).use(['index'], function () {
        const $ = layui.$;
        const layer = layui.layer;

        $('#keyword').on('keydown', function (e) {
            if (e.keyCode == 13) {
                allMapLocalSearch.search($('#keyword').val());
            }
        });

        function addPage(results) {
            const html = [];
            html.push("<div style='background-color: white;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);border-radius: 5px;padding: 5px;'>");
            if (results.getPageIndex() > 0) {
                html.push("<span style='color:black;cursor: pointer;' onclick='allMapLocalSearch.gotoPage(0);'>首页</span> ");
                html.push("<span style='color:black;cursor: pointer;' onclick='allMapLocalSearch.gotoPage(" + (results.getPageIndex() - 1) + ");'>上一页</span> ");
            } else {
                html.push("<span style='color:darkgray;'>首页</span> ");
                html.push("<span style='color:darkgray;'>上一页</span> ");
            }
            if (results.getPageIndex() + 1 != results.getNumPages()) {
                html.push("<span style='color:black;cursor: pointer;' onclick='allMapLocalSearch.gotoPage(" + (results.getPageIndex() + 1) + ");'>下一页</span> ");
                html.push("<span style='color:black;cursor: pointer;' onclick='allMapLocalSearch.gotoPage(" + (results.getNumPages() - 1) + ");'>尾页</span> ");
            } else {
                html.push("<span style='color:darkgray;'>下一页</span> ");
                html.push("<span style='color:darkgray;'>尾页</span> ");
            }
            html.push("<br>[共" + results.getNumPages() + "页 " + results.getNumPois() + "条记录 当前第" + (results.getPageIndex() + 1) + "页 " + results.getCurrentNumPois() + "条记录]");
            html.push("</div>");
            allMapCopyrightControl.addCopyright({
                id: 1
                , content: html.join("")
                , bounds: allMap.getBounds()
            });
        }

        function addMarker(result) {
            const marker = new BMap.Marker(result.point, {title: result.title ? result.title : result.address});
            marker.addEventListener("mouseover", function () {
                marker.setTop(true);
            });
            marker.addEventListener("mouseout", function () {
                marker.setTop(false);
            });
            marker.addEventListener("click", function () {
                addPoi(result);
            });
            allMap.addOverlay(marker);
        }

        function addPoi(result) {
            $('#title').val(result.title ? result.title : result.address);
            $('#address').val(result.address);
            $('#point').val(result.point.lng + ',' + result.point.lat);
        }
        allMap.centerAndZoom(allMapConfig.location, allMapConfig.zoom);
        allMap.enableScrollWheelZoom(true);
        allMap.addControl(allMapCopyrightControl);
        allMapAutocomplete.addEventListener("onconfirm", function (e) {
            allMapLocalSearch.search($('#keyword').val());
        });
        allMapLocalSearch.setSearchCompleteCallback(function (results) {
            if (allMapLocalSearch.getStatus() == BMAP_STATUS_SUCCESS) {
                allMap.clearOverlays();
                addPage(results);
                addPoi(results.getPoi(0));
                const points = [];
                for (let index = 0; index < results.getCurrentNumPois(); index++) {
                    const result = results.getPoi(index);
                    console.log(result);
                    points.push(result.point);
                    addMarker(result);
                }
                allMap.setViewport(points);
            } else {
                layer.msg('搜索失败！[' + allMapLocalSearch.getStatus() + ']');
            }
        });
        const loading = layer.load();
        allMapGeolocation.getCurrentPosition(function (result) {
            console.log(result);
            if (allMapGeolocation.getStatus() == BMAP_STATUS_SUCCESS) {
                allMap.centerAndZoom(result.point, allMapConfig.zoom);
                allMapGeo.getLocation(result.point, function (result) {
                    console.log(result);
                    addPoi(result);
                    addMarker(result);
                });
            } else {
                layer.msg('浏览器定位失败！[' + allMapGeolocation.getStatus() + ']');
            }
            layer.close(loading);
        });
    });
</script>
</body>
</html>
